<template>
  <a-table
    :columns="colModelData"
    :data-source="lstDisplay"
    bordered
    size="small"
    :pagination="false"
  >
  </a-table>
</template>
<script setup>
import { onMounted, reactive } from "vue";
import { computed } from "@vue/reactivity";
import CommonDefine from "@/component/CommonDefine";

const props = defineProps({ result: Object });

const colModelData = computed(() => {
  let ary = [];
  props.result.fields.forEach((df) => {
    let col = {
      dataIndex: df.id,
      title: df.label,
      type: df.fieldType.code,
    };
    col.sorter = (a, b) => {
      return a[df.id].localeCompare(b[df.id], "zh");
    };
    col.sortDirections = ["descend", "ascend"];
    ary.push(col);
  });
  return ary;
});

const lstDisplay = reactive([]);

const setView = () => {
  CommonDefine.clearArray(lstDisplay);
  props.result.records.forEach((rec) => {
    // let displayRecord = {};
    // Object.keys(rec.displays).forEach((k) => {
    //   displayRecord[k] = rec.displays[k];
    // });
    lstDisplay.push(rec.display);
  });
};

onMounted(() => {
  setView();
});
</script>
